<template>
  <el-menu 
    class="categories" 
    mode="vertical" 
    default-active="0" 
    active-text-color="red"
    @select="handleSelect">
      <el-menu-item index="0">
        <i class="el-icon-menu"></i>
          <span slot="title">全部</span>
      </el-menu-item>
      <el-menu-item v-for="(item,i) in categories" :key="i" :index="item.id.toString()">
        <i class="el-icon-menu"></i>
        <span slot="title">{{item.name}}</span>
      </el-menu-item>
  </el-menu> 
</template>

<script>
export default {
  name: 'SideMenu',
  data () {
    return {
      cid: ''
    }
  },
  props: [
    // 获取父组件分类属性
    'categories'
  ],
  methods: {
    handleSelect (key) {
      this.cid = key
      this.$emit('indexSelect')
    }
  }
}
</script>

<style scoped>
    .categories {
        position: absolute;
        margin-left: 0%;
        top: 61px;
        width: 150px;
    }
</style>
